<template>
  <el-container>
    <el-header>
      <div class="logo_container">
        <el-button text @click="goHome">
          <img class="logo" src="/favicon.ico" alt="LMS Logo"/>
          <h1>物流管理系统</h1>
        </el-button>
      </div>
      <div class="content_container">
        <el-switch class="content" v-model="blackMod" size="large"
                   active-text="暗黑" inactive-text="白昼"/>
        <template v-if="isLogin()">
          <el-button class="content" type="default" text @click="goToUserHome">
            欢迎，{{ userState.data.username }}
          </el-button>
          <el-button class="content" type="primary" :icon="CircleClose" @click="userSignOut">
            退出登录
          </el-button>
        </template>
        <el-button v-else class="content" type="primary" :icon="User" @click="$router.push({name:'login'})">
          登录
        </el-button>
      </div>
    </el-header>
    <router-view/>
  </el-container>
</template>

<script>
import 'element-plus/theme-chalk/dark/css-vars.css'
import {ref} from "vue";
import {useDark, useToggle} from '@vueuse/core'
import {User, CircleClose} from '@element-plus/icons-vue'
import {goHome, goToUserHome} from "@/scripts/router";
import {STORE, isLogin, logout} from "@/scripts/account";
import {ElNotification} from "element-plus";


const toggleDark = useToggle(useDark())
export default {
  name: 'App',
  data() {
    return {
      blackMod: ref(false),
      User, CircleClose,  // icon
      userState: STORE.userState
    }
  },
  methods: {
    goHome,
    goToUserHome,
    isLogin,
    userSignOut() {
      logout()
      goHome()
      ElNotification({
        title: '退出成功',
        message: '欢迎您下次再来😃',
        type: 'success'
      })
    }
  },
  watch: {
    blackMod() {
      toggleDark()
    },
  },
}
</script>

<style scoped>
.el-header {
  display: flex;
  justify-content: space-between;
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.logo_container {
  display: flex;
  align-items: center;
}

.logo {
  height: 48px;
}

.content_container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
}

.content {
  padding-left: 8px;
  padding-right: 8px;
}
</style>
